<template>
  <div class="home">
    <el-container style="height: 600px;">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu :default-openeds="['1']" @select="selectChange">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-message"></i>导航一
            </template>
            <el-menu-item-group>
              <el-menu-item index="1">tab页</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <el-tabs
          v-model="activeTab"
          @tab-remove="closeTab"
          @tab-click="triggerTab"
          type="border-card"
          closable
        >
          <el-tab-pane
            v-for="(item) in tabList"
            :key="item.name"
            :name="item.name"
            :label="item.label"
          >
            <span slot="label">
              <i class="el-icon-refresh" @click.stop="refresh()"></i>
              {{item.label}}
            </span>
            <component
              v-if="item.refresh"
              :is="item.component"
              :ref="item.name"
              style="padding:5px"
            ></component>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import store from "../store/index";
import tabmain from "../views/Tabmain.vue";
import TabChilder from "../views/TabChilder.vue";
export default {
  name: "Home",
  components: { tabmain, TabChilder },
  data() {
    return {
      tabList: store.state.tabList,
      activeTab: store.state.activeTab
    };
  },
  methods: {
    selectChange() {
      let arr = {
        name: `new`,
        component: "tabmain",
        label: `我是tab页`
      };
      this.$common.judgeTab(arr, "tabmain");
    },
    refresh() {
      this.$common.refreshTab();
    },
    triggerTab() {},
    closeTab(e) {
      let len = store.state.tabList.length;
      len > 1 && store.commit("closeTab", e);
    }
  },
  watch: {
    activeTab(v) {
      store.commit("updateActiveTab", v);
    },
    "$store.state.activeTab"() {
      this.activeTab = store.state.activeTab;
    }
  }
};
</script>
